<template>
  <view class="ListCard" @click="eventClick(item)">
    <view class="leftBox">
      <view class="circleBox">
        <image class="img center" src="@/static/imgs/baojing.png"></image>
      </view>
    </view>
    <view class="rightBox">
      <view class="title">{{ item.type }}</view>
      <view class="subBox clear">
        <view class="sub" style="width: 50%;">
          <text>报警类别:</text>
          <text>{{ item.category }}</text>
        </view>
        <view class="sub" style="width: 50%;">
          <text>作业人:</text>
          <text>{{ item.name }}</text>
        </view>
        <view class="sub">
          <text>报警地点:</text>
          <text>{{ item.location }}</text>
        </view>
        <view class="sub" style="width: 100%;">
          <text>报警时间:</text>
          <text>{{ item.time }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selItem: '',
    };
  },
  props: {

    item: {
      type: Object,
      default: () => {
      }
    },
  },
  mounted() {
  },
  methods: {
    eventClick(item, idx) {
      this.$emit('eventClick', item);
    }
  }
};
</script>

<style lang="scss">
	.ListCard{
		box-sizing: border-box;
		width: 100%;
		padding:25rpx;
		border-bottom: 1rpx solid #e9e9e9;
		display: flex;
		flex-flow: row nowrap;
		font-size: $font-size-12;
		.leftBox{
			width:160rpx;
			.circleBox{
				margin:0 auto;
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				position: relative;
				background: #f5f7fa;
				.img{
					width:48rpx;
					height: 50rpx;
				}
			}
		}
		.rightBox{
			flex:1;
		}
		.subBox{
			color:#8b8a8a;
			.sub{
				float: left;
				width: 100%;
			}
		}
	}
</style>
